.floatLeft {
  float: left;
}

.preview {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  overflow: hidden;
  background-color: #fafafa;

  &.circle {
    border-radius: 50%;
  }
}

@itemSize: 120px;

.br() {
  border-radius: 4px;
}
.poab {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.upload {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 120px;
  grid-template-columns: repeat(auto-fit, 120px);
  gap: 10px;
  .upload-list-item {
    position: relative;
    width: @itemSize;
    height: @itemSize;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    .br;

    &.upload-block {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--upload-bg);
      border: var(--border-width-base) var(--border-style-base) var(--upload-border-color);
      cursor: pointer;
    }

    &:not(.upload-block):hover::before {
      opacity: 1;
    }
    &:hover {
      .upload-list-item-tools {
        opacity: 1;
      }
    }

    &:not(.upload-block):before {
      background-color: rgba(0, 0, 0, 0.45);
      opacity: 0;
      content: '';
      .br;
      .poab;
    }

    .upload-list-item-tools {
      display: flex;

      display: grid;
      grid-template-rows: 20px;
      grid-template-columns: repeat(auto-fit, 30px);
      align-content: center;
      align-items: center;
      justify-content: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      color: white;
      opacity: 0;
      .poab;

      .upload-list-item-icon {
        cursor: pointer;
      }
    }
  }
}
